<template>
  <drag-div>
    <div slot="left" class="m">
      <cm-scroll>
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText"
          clearable
        ></el-input>
        <el-tree
          :data="categoryList"
          :props="categoryProps"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          class="filter-tree"
          :default-expanded-keys="[defaultExpandKeys]"
          :highlight-current="showTree"
          :style="maxHeight"
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
          default-expand-all
        >
        </el-tree>
      </cm-scroll>
    </div>
    <div slot="right" style="padding:10px;">
      <el-row>
        <box-border class="p10">
          <el-col :span="24">
            <div>
              <el-row :gutter="4">
                <el-form :inline="true">
                  <el-form-item label="关键字:">
                    <el-input
                      placeholder="请输入关键字"
                      v-model="searchDto.keywords"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="时间:">
                    <el-date-picker
                      v-model="value4"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item class="clear_item-margin-bottom">
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      @click="getPageData()"
                      >查询
                    </el-button>
                    <el-button
                      type="primary"
                      icon="el-icon-s-open"
                      @click="clear()"
                      >重置
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-row>
            </div>
            <div class="table_content">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="-1"></el-tab-pane>
                <el-tab-pane
                  v-for="(item, index) in doTypes"
                  :key="index"
                  :label="item.label"
                  :name="item.keyword"
                ></el-tab-pane>
              </el-tabs>
              <page-table
                ref="multipleSelection"
                :page-data="pageData"
                :loading="loading"
                :do-get-page-data="getPageData"
              >
                <el-table-column
                  prop="title"
                  label="督办事项"
                  align="left"
                  width="200"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <a
                      class="task_title_a"
                      @click="openReport(scope.row)"
                      v-if="!scope.row.readStatus"
                    >
                      <el-badge is-dot class="dot_item"></el-badge
                      >{{ scope.row.title }}
                    </a>
                    <a
                      class="task_title_a"
                      @click="openReport(scope.row)"
                      v-else
                      >{{ scope.row.title }}</a
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="状态"
                  align="center"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <sz-badge
                      :value="scope.row.status | keyText('SUPERVISION_STATUS')"
                      :type="statusStyle(scope.row)"
                    ></sz-badge>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="progress"
                  label="进度"
                  align="center"
                  width="180"
                >
                  <template slot-scope="scope">
                    <el-progress
                      :percentage="scope.row.progress ? scope.row.progress : 0"
                      color="#409eff"
                      style="line-height: inherit;"
                    ></el-progress>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="createUserName"
                  label="创建人"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="categoryName"
                  label="督办分类"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="responsiblePerson"
                  label="责任人"
                  align="center"
                  width="160"
                  show-overflow-tooltip
                >
                </el-table-column>
                <!--                <el-table-column-->
                <!--                  prop="linkUserName"-->
                <!--                  label="联系人"-->
                <!--                  align="center"-->
                <!--                  width="80"-->
                <!--                >-->
                <!--                </el-table-column>-->
                <el-table-column
                  prop="planStartTime"
                  label="计划开始时间"
                  align="center"
                  width="120"
                >
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.planStartTime | formatTime("yyyy-MM-dd")
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="planEndTime"
                  label="计划结束时间"
                  align="center"
                  width="120"
                >
                  <template slot-scope="scope">
                    <span
                      :style="{ color: thisData(scope.row) ? 'red' : '' }"
                      >{{
                        scope.row.planEndTime | formatTime("yyyy-MM-dd")
                      }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="updateTime"
                  label="最近更新时间"
                  align="center"
                  width="160"
                >
                </el-table-column>
                <!--                <el-table-column-->
                <!--                  prop="hostUnit"-->
                <!--                  label="主办"-->
                <!--                  align="center"-->
                <!--                  width="120"-->
                <!--                >-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                  prop="coSponsorUnit"-->
                <!--                  label="协办"-->
                <!--                  align="center"-->
                <!--                  width="120"-->
                <!--                >-->
                <!--                </el-table-column>-->
                <el-table-column
                  label="管理"
                  width="150"
                  align="center"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="mini"
                      @click="openReport(scope.row)"
                    >
                      <span
                        v-if="
                          currentTokenUser.user.userId ===
                            scope.row.responsibleUserId
                        "
                        >汇报</span
                      >
                      <span v-else>详情</span>
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      @click="delSupervise(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </page-table>
            </div>
          </el-col>
        </box-border>
      </el-row>
    </div>
  </drag-div>
</template>
<script>
import { mapGetters } from "vuex";
import superviseDetail from "./superviseDetail";
import Moment from "moment";

export default {
  name: "mySupervise",
  created() {
    this.initData();
  },
  mounted() {
    let that = this;
    let loop = setInterval(function() {
      let tag = window.localStorage.getItem("wait");
      if (tag === "refresh") {
        clearInterval(loop);
        that.getPageData();
      }
    }, 1);
  },
  watch: {
    // $route(to, from) {
    //   console.log(to, from);
    //   this.initData();
    // },
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  activated() {
    console.log(this.$route.params.canRefresh);
    if (this.$route.params.canRefresh) {
      this.initData();
    }
  },
  data() {
    return {
      doTypes: this.getDictionary("SUPERVISION_STATUS"),
      value4: [],
      activeName: "-1",
      showFlowNodeHistory: false,
      defaultExpandKeys: "",
      showTree: false,
      filterText: "",
      categoryProps: {
        label: "name",
        value: "id"
      },
      categoryList: [],
      loading: false,
      searchDto: {
        categoryId: "",
        pageSize: 10,
        pageIndex: "",
        keywords: "",
        startTime: "",
        endTime: "",
        status: ""
      },
      pageData: {},
      currentTokenUser: JSON.parse(window.sessionStorage.getItem("userInfo")),
      curTaskId: "", // 当前任务id
      categoryNow: "", //当前选择左侧分类
      statusNow: "" //当前选择状态
    };
  },
  computed: {
    ...mapGetters({}),
    maxHeight() {
      return { height: this.clientHeight - 220 + "px" };
    }
  },
  methods: {
    thisData(row) {
      return new Date().getTime() >= new Date(row.planEndTime).getTime();
    },
    // 状态颜色设置
    statusStyle(row) {
      let cls = "";
      switch (row.status) {
        case "DOING":
          cls = "danger";
          break;
        case "WAIT_CONFIRM":
          cls = "warning";
          break;
        case "COMPLETED":
          cls = "success";
          break;
      }
      return cls;
    },
    initData() {
      (this.searchDto = {
        categoryId: "",
        pageSize: 10,
        pageIndex: "",
        keywords: "",
        startTime: "",
        endTime: "",
        status: ""
      }),
        (this.searchDto.flowId = this.$route.query.flowId);
      this.getCategoryTree();
      this.getPageData();
    },
    handleClick(tab, event) {
      let status;
      switch (tab.paneName) {
        case "-1":
          status = "";
          break;
        default:
          status = tab.paneName;
          break;
      }
      this.searchDto = {
        categoryId: this.categoryNow,
        pageSize: 10,
        pageIndex: "",
        keywords: "",
        startTime: "",
        endTime: "",
        status: ""
      };
      this.statusNow = status;
      this.searchDto.status = this.statusNow;
      this.getPageData();
    },
    // 显示流程轨迹面板
    showFlowNode(row) {
      this.curTaskId = row.id;
      console.log(this.curTaskId);
      this.showFlowNodeHistory = true;
    },
    // 跳转任务处理
    taskEdit(row) {
      let routeData = this.$router.resolve({
        path: "/workflow/apply",
        query: { flowId: row.flowId, taskId: row.id }
      });
      this.openPage(routeData.href, "wait");
      // this.openTabPage(routeData.href);
    },
    // 获取督办类型
    getCategoryTree() {
      this.API.getCategoryTree({ type: "SUPERVISE", parentId: 0 }).then(res => {
        this.categoryList = [];
        if (res.data) {
          this.categoryList.push({ name: "全部", id: "", children: res.data });
        }
      });
    },
    // 过滤分类
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 左侧分类树的单击事件
    handleNodeClick(val) {
      this.searchDto = {
        categoryId: "",
        pageSize: 10,
        pageIndex: "",
        keywords: "",
        startTime: "",
        endTime: "",
        status: this.statusNow
      };
      this.categoryNow = val.id;
      this.searchDto.categoryId = this.categoryNow;
      this.getPageData();
    },
    //  分页列表
    getPageData(val) {
      this.searchDto.startTime = "";
      this.searchDto.endTime = "";
      if (this.value4 && this.value4.length > 0) {
        this.searchDto.startTime = Moment(this.value4[0]).format("YYYY-MM-DD");
        this.searchDto.endTime = Moment(this.value4[1]).format("YYYY-MM-DD");
      }
      let tem = Object.assign(this.searchDto, val);
      this.API.getMySupervisionMatterPageList(tem).then(res => {
        this.pageData = res.data;
        console.log("pageData", res.data);
        window.localStorage.setItem("wait", "");
      });
    },

    // 汇报
    openReport(row) {
      this.$router.push({
        path: "/main/supervise/superviseReport",
        query: { matterId: row.id }
      });
    },
    //删除督办
    delSupervise(row) {
      this.$confirm("是否确认删除当前督办事项", "提示", {}).then(() => {
        let tem = { id: row.id };
        this.API.deleteSupervisionMatterById(tem).then(() => {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.getPageData();
        });
      });
    },
    //清空
    clear() {
      this.searchDto = {
        categoryId: "",
        pageSize: 10,
        title: "",
        sender: "",
        flowId: "",
        startTime: "",
        endTime: "",
        status: "0"
      };
      this.value4 = [];
      this.getPageData();
    }
  },
  components: {
    superviseDetail
  }
};
</script>

<style scoped></style>
